<template>
  <div>
    <el-dialog class="dialog" :visible.sync="visible" :width="width" :modal-append-to-body="false" :show-close="true"
      :close-on-click-modal="false" :before-close="hide" :style="{ '--el-dialog-height': height }">
      <template slot="title">
        <div class="close" @click="hide"></div>
        <div class="dialog-header">
          <div class="header-title">{{ $route.meta.title }}设计</div>
        </div>
      </template>
      <div class="dialog-body">
        <fc-designer ref="designerRef" height="100%" :menu="menuList" :config="config" @save="handleSave" />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="hide">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'FormDesignerDialog',
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    params: {
      type: Object,
      default: {},
    },
    width: {
      type: String,
      default: '80%',
    },
    height: {
      type: String,
      default: '915px',
    },
  },
  data() {
    return {};
  },
  computed: {
    menuList() {
      return this.params.menuList;
    },
    config() {
      const defaultConfig = {
        exitConfirm: false, // 是否显示关闭确认弹窗
        showSaveBtn: false, // 是否显示保存按钮
        showMenuBar: false, // 是否显示左侧工具栏
        showLanguage: true, // 是否显示多语言配置
        showJsonPreview: true, // 是否显示JSON预览模块
        showLanguage: false, // 是否显示多语言配置
        showStyleForm: false, // 是否显示组件的样式配置表单
        showEventForm: false, // 是否显示组件的事件配置表单
        labelConfig: true, // 是否显示标签配置
        fieldReadonly: false, // 字段ID是否只读
        showComponentName: false, // 隐藏标签配置
        showControl: false, // 隐藏组件的联动数据配置
        showCustomProps: false, // 是否显示自定义props按钮
      };
      return Object.assign(defaultConfig, this.params.config);
    },
  },
  watch: {
    visible: {
      handler(value) {
        if (value) {
          this.$nextTick(() => {
            this.getData();
          });
        }
      },
      immediate: true,
    },
  },
  methods: {
    hide() {
      this.$refs.designerRef.clearDragRule();
      this.$emit('update:visible', false);
    },
    getData() {
      if (this.params.rule && this.params.option) {
        this.$refs.designerRef.setRule(this.params.rule);
        this.$refs.designerRef.setOption(this.params.option);
      }
    },
    handleSave() {
      this.$emit('success', 'FormDesignerDialog', {
        rule: this.$refs.designerRef.getRule(),
        option: this.$refs.designerRef.getOption(),
      });
      this.hide();
    },
  },
};
</script>

<style lang="scss" scoped>
@import '@/assets/styles/dialog.scss';
// @import '@/assets/styles/mixin.scss';

// ::v-deep .el-dialog__body {
//   padding-right: 5px !important;
// }

.dialog-body {
}
</style>
